<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="月份选择">
          <el-date-picker type="month" v-model="month" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="button-group">
      <el-button type="primary">一键上报</el-button>
    </div>
    <el-table
      v-loading="loading"  :data="lists" height="100%"
      :header-cell-style="{
        color: 'white',
        backgroundColor: themeColor
      }"
    >
      <div slot="empty" class="empty-lists">
        <i class="i-custom:search"></i>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
        <template v-if="column.prop === 'numericalValue'" #default="{ row }">
          <input-number-editor
            v-model="row.numericalValue" :maxlength="10"
            :auto-focus="false" :show-update-icon="false"
          ></input-number-editor>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="id" :width="100">
        <template #default="{ row }">
          <td-button title="上报" @click="report(row)">
            <i class="i-custom:upload"></i>
          </td-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TdButton from '@/components/td-button'
import { selectReportContentMonthlyList } from '@/api/reportContent'
import { reportMonthlyData } from '@/api/reportValue'
import InputNumberEditor from '@/components/input-number-editor'

export default {
  name: 'enterprise-report-month',
  components: { TdButton, InputNumberEditor },
  data () {
    return {
      month: this.$dayjs().subtract(1, 'month').format('YYYY-MM'),
      loading: false,
      lists: [],
      columns: [
        // { label: '工序及工序单元', prop: 'col1' },
        { label: '名称', prop: 'name' },
        { label: '能源品种', prop: 'energyVarietiesTypeName' },
        { label: '能源种类', prop: 'energyTypeName' },
        { label: '能源用途', prop: 'energyUseName' },
        { label: '计量单位', prop: 'col3' },
        { label: '填报', prop: 'numericalValue' },
      ],
      pickerOptions: {
        disabledDate (date) {
          const now = new Date()
          const month = now.getMonth()
          now.setMonth(month - 1)
          return date > new Date(now)
        }
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
  },
  mounted () {
    this.query()
  },
  methods: {
    report (row) {
      if (row.numericalValue === '' || row.numericalValue == null) {
        return this.$message.error('请填写上报数据')
      }
      this.$confirm('是否确定上报？', '操作提示').then(() => {
        if (row.id) {
          reportMonthlyData(row.id, row.numericalValue).then(res => {
            if (res.code === 200) {
              this.query()
            }
          })
        }
      }).catch(() => {})
    },
    query () {
      this.loading = true
      return selectReportContentMonthlyList().then(res => {
        if (res.code === 200) {
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>
